<script setup lang="ts">
import CommonPlayList from './CommonPlayList.vue'
import CommonSlide from '@components/Common/CommonSlide.vue';
import CommonPlayButtons from '@components/Common/CommonPlayButtons.vue';
import CommonComment from '@components/Comment/CommonComment.vue';
import { MusicList, User, setSrcAndPlayKey, setSrcAndPlay, Music } from '@/type';
import { useRouter } from 'vue-router';
import { onMounted, reactive, ref, onUpdated, inject } from 'vue';
import { useStore } from '../stores/index';
import { getPublicUserInfo, getCollectUsers, getRecommendMusicList } from '@api';
import axios from '../plugins/axiosInstance';
const store = useStore();
const BaseUrl = store.getBaseUrl();
// 立刻播放
const setSrcAndPlay = inject(setSrcAndPlayKey) as setSrcAndPlay
const router = useRouter()
const props = defineProps<{
    musicListId: string,
    disableSlide: string
}>()

const collectListUsers = ref<User[]>([])
/**
 * @description 从服务器获取的歌单列表
 */
const listInfo = reactive<{ info: MusicList | null }>({
    info: null
});
const creatorInfo = ref<User>();
/**
 * 当歌单描述太长时需要显示展开按钮
 * @description 用于控制是否显示展开按钮
 */
const needToBeOmitted = ref(false);
/**
 * @description 展开 / 收起歌单描述
 */
const switchOmitted = () => {
    needToBeOmitted.value = !needToBeOmitted.value;
}
/**
 * 是否展示歌单详情
 */
const showDetail = ref(true);
/**
 * 展示详情变量切换
 * @param state 新状态
 */
const switchShowDetail = (state: boolean) => {
    showDetail.value = state;
}
/**
 * 前往歌单编辑
 */
const editMusicList = () => {
    router.push({ name: 'listEdit', params: { musicListId: props.musicListId } })
}
/**
 * 歌单信息是否获取完成
 */
const listInfoIsReady = ref(false);
const recommendList = ref<MusicList[]>()
const getNewRecommendList = () => {
    getRecommendMusicList(props.musicListId).then((res) => {
        if (res.data.code === 1) {
            recommendList.value = res.data.data.list;
        }
    })

}

const getCollectListUsers = () => {
    getCollectUsers(props.musicListId).then((res) => {
        if (res.data.code === 1) {
            if (res.data.msg != '还没有用户收藏该歌单') {
                collectListUsers.value = res.data.data;
            } else {
                collectListUsers.value = [];
            }
        }
    })
}
onUpdated(() => {
    // 点击不同歌单时刷新数据
    if (listInfo.info != null) {
        if (listInfo.info.id != props.musicListId) {
            getCollectListUsers()
            getNewRecommendList()
            axios.get(`/music/getList`, { params: { musicListId: props.musicListId } })
                .then((res) => {
                    if (res.data.code === 1) {
                        listInfo.info = res.data.data
                        getPublicUserInfo(listInfo.info?.creatorId as string).then((res) => {
                            creatorInfo.value = res.data.data
                        })
                        // 当获取的歌单描述长度大于100时，需要显示展开按钮
                        if (listInfo.info !== null && listInfo.info.introduce.length > 100) {
                            switchOmitted()
                            switchShowDetail(false)
                        }
                    }
                })
        }
    }
})
/**
 * 初次加载歌单时从服务器获取数据
 */
onMounted(() => {
    getCollectListUsers()
    getNewRecommendList()
    axios.get(`/music/getList`, { params: { musicListId: props.musicListId } })
        .then((res) => {
            if (res.data.code == 1) {
                console.log("获取的歌单", res.data.data)
                listInfoIsReady.value = true;
                listInfo.info = res.data.data
                getPublicUserInfo(listInfo.info?.creatorId as string).then((res) => {
                    creatorInfo.value = res.data.data
                })
                // 当获取的歌单描述长度大于100时，需要显示展开按钮
                if (listInfo.info !== null && listInfo.info?.introduce.length > 100) {
                    switchOmitted()
                    switchShowDetail(false)
                }
            }

        })
})
const toUserPage = () => {
    router.push({
        name: 'personCenter',
        params: {
            userId: creatorInfo.value?.id,
            type: 'default'
        }
    })
}
</script>
<template>
    <div class="music-container">
        <div :class="{ left: true, inMyMusic: props.disableSlide == '1' }">
            <div :class="{ listInfo: true, listInfoShow: !showDetail, listInfo_: props.disableSlide == '1' }"
                v-if="listInfo.info !== null">
                <div class="listImage">
                    <img :src="BaseUrl + '/static/image/' + listInfo.info.image">
                </div>
                <div class="info">
                    <div class="title">
                        <h2>{{ listInfo.info.title }}</h2>
                        <div v-if="disableSlide && listInfo.info.creatorId == store.UserInfo.id" class="editStyle"
                            @click="editMusicList">
                            <img class="edit" src="../assets/edit.svg" alt="">
                            <span>编辑</span>
                        </div>
                    </div>
                    <div class="creator">

                        <!--  -->
                        <img style="cursor: pointer;" @click="toUserPage"
                            :src="BaseUrl + '/static/image/' + creatorInfo?.avatar" alt="创建者头像">
                        <span @click="toUserPage" class="userName">
                            <a style="cursor: pointer;">{{ listInfo.info.creatorName }}</a>
                        </span>
                        <span class="date">{{ listInfo.info.createDate }} 创建</span>
                    </div>
                    <CommonPlayButtons :type-id="(listInfo.info.id as string)"
                        :user-list="(listInfo.info.singerList as User[])" type="musicList" :music="null"
                        :music-list="(listInfo.info.musicList as Music[])" />
                    <div class="introduce">
                        <p>介绍:
                            {{ showDetail ? listInfo.info.introduce : listInfo.info?.introduce.slice(0, 100) + '...' }}
                        </p>
                        <a class="detail" v-if="needToBeOmitted" @click="switchShowDetail(!showDetail)">{{
                            showDetail ? "收起" : "展开" }} </a>
                    </div>
                </div>
            </div>
            <CommonPlayList :music-list-id="props.musicListId" :myMusic="props.disableSlide == '1' ? true : false"
                :music-list="(listInfo.info?.musicList as Music[])" :singer-list="(listInfo.info?.singerList as User[])"
                v-if="listInfoIsReady" />
            <CommonComment :myMusic="props.disableSlide == '1'" type="l" :typeId="props.musicListId" />
        </div>
        <div class="slide" v-show="props.disableSlide != '1'">
            <CommonSlide single-music-model="false" singer-model="false" :bottom="recommendList" music-lisl-model="true"
                :top="collectListUsers" />
        </div>
    </div>
</template>
<style scoped lang="css">
.editStyle {
    display: flex;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    justify-content: center;
    color: var(--blue-style);
}

.edit {
    width: 20px;
    height: 20px;
}

.music-container .inMyMusic {
    padding: 0 !important;
}

/* 以上的样式为我的音乐-创建的歌单 中特殊样式 */
.info {
    flex: 1;
}

.introduce p {
    font-size: 12px;
}

.introduce {
    position: relative;
}

.introduce .detail {
    text-decoration: none;
    float: right;
    bottom: 0;
    cursor: pointer;
}


.function {
    margin-bottom: 30px;
}

.date {
    line-height: var(--avatar-small-size);
}

.creator {
    display: flex;
    text-align: center;
    margin-bottom: 25px;
}

.userName a {
    text-decoration: none;
    color: #0C73C2;
}

.userName {
    line-height: var(--avatar-small-size);
    margin-right: 20px;
}

.creator img {
    height: var(--avatar-small-size);
    width: var(--avatar-small-size);
    margin-right: 10px;
}

.title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;

}

.title h2 {
    margin-top: 0;
    font-weight: normal;
    font-size: 20px;
    margin-bottom: 0;
}

.music-container {
    display: flex;
}

.left {
    flex: 9;
    padding: 5px 10px 0;
    width: 50%;
    flex-wrap: wrap;
    display: flex;
    box-sizing: content-box;
    flex-direction: column;
}

.slide {
    width: 100px;
    flex: 3;
    border-left: #D4D4D4 1px solid;
}

.listImage img {
    height: var(--music-list-image-size);
    width: var(--music-list-image-size);
}

.listImage {
    margin-right: 25px;
    height: calc(var(--music-list-image-size));
    width: calc(var(--music-list-image-size));
    padding: 2px;
    border: 1px solid #D4D4D4;
    border: #D4D4D4 1px solid;
}

.listInfo_ {
    padding: 45px 10px 0px 0px !important;
}

.listInfo {
    padding: 45px 30px 0px 40px;
    display: flex;
    box-sizing: border-box;
}

.listInfoShow {
    height: 300px;
}
</style>